<template>
	<view class="content">
		<view class="tophaderbg">
			<my-headerbg @instruct="handinstruct" :instruct="instruct" :imageshow="imageshow"></my-headerbg>
		</view>
		<scroll-view scroll-y="true" class="ScrollView">
			<image class="topdaohang" :src="proxy.serverimageUrl +'shenqing/daohangye3.png'" mode=""></image>
			<view class="formitem" style="padding-bottom: 20rpx;">
				<up-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelStyle='labelStyle'
					labelWidth="140">
					<up-form-item prop="resume">
						<view class="form-item">
							<view class="title" style="margin-top: 0;">
								个人简历
							</view>
							<up-textarea v-model="form.resume" placeholder="请输入内容" count maxlength="500"></up-textarea>
						</view>
					</up-form-item>
					<up-form-item prop="companyIntroduction">
						<view class="form-item">
							<view class="title">
								企业简介
							</view>
							<up-textarea v-model="form.companyIntroduction" placeholder="请输入内容" count
								maxlength="300"></up-textarea>
						</view>
					</up-form-item>
				</up-form>
			</view>
			<view class="formitem" style="padding-bottom: 20rpx;margin-top: 20rpx;">
				<up-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelStyle='labelStyle'
					labelWidth="140">
					<up-form-item prop="socialContribution">
						<view class="form-item">
							<view class="title" style="margin-top: 0;">
								社会贡献(近三年捐赠情况)
							</view>
							<up-textarea v-model="form.socialContribution" placeholder="请输入内容" count
								maxlength="300"></up-textarea>
						</view>
					</up-form-item>
					<up-form-item prop="proposal">
						<view class="form-item">
							<view class="title">
								对第六届协会建设的建议
							</view>
							<up-textarea v-model="form.proposal" placeholder="请输入内容" count
								maxlength="100"></up-textarea>
						</view>
					</up-form-item>
				</up-form>
			</view>
			<view class="opinionBox">
				<view class="opinionBox-top">
					<view class="top-leftbox">
						本人意见
					</view>
					<view class="top-rightbox" @tap="roundchange">
						<view class="radioround">
							<view class="itemround" v-show="roundshow">

							</view>
						</view>
						<view class="">
							同意
						</view>
					</view>
				</view>
				<view class="opinionBox-content">
					<p> 1.本人郑重声明该表所填内容真实有效，无虚假信息。</p>
					<p>2.本人自愿加入本协会，遵守协会章程，按时交纳会费，履行会员义务，请予审批。</p>
				</view>
			</view>
			<view style="height: 45rpx;background: #F4F5F8;">

			</view>
		</scroll-view>
		<up-modal :show="modalshow" cancelText="坚持退出" confirmText='继续填写' showCancelButton @cancel="modelcancel" @confirm="modalconfirm"
			:content='modalcontent'></up-modal>
		<view class="bottom-btn">
			<view class="btnbox">
				<view class="btn">
					<up-button @click="Back" text="上一步" color="#D4E1FE"></up-button>
				</view>
				<view class="btn">
					<up-button text="提交" @click="submit" color="#2854B7"></up-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		// getCondition,
		modifyMember,
		getMemberByOpenid
	} from '../../utils/api.js'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const openid = uni.getStorageSync('openid')
	onLoad(() => {
		// GetCondition()
		getMember()
	})
	const Back = () => {
		uni.navigateBack()
	}
	/*查询会员信息*/
	const getMember = () => {
		let params = {
			openid,
			type: 3
		}
		getMemberByOpenid(params).then(res => {
			if (res.data.mid) {
				form.value = res.data
			}
		})
	}
	const imageshow = ref(2)
	const checkactive = ref(0)
	const labelStyle = ref({
		'fontSize': '15rpx',
		'fontWeight': '400',
		'color': '#252525'
	})
	const modalshow = ref(false)
	const modalcontent = ref('信息未保存是否继续填写')
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				modalshow.value = true
				break;
		}
	}
	const modalconfirm = () => {
		submit()
	}
	const modelcancel = () => {
		uni.switchTab({
			url: '/pages/Mypage/index'
		})
	}
	const datetimeshow = ref(false)
	const datetime = ref(Date.now())
	// 使用 reactive 创建响应式状态  
	const form = ref({
		proposal: '',
		socialContribution: '',
		resume: '',
		companyIntroduction: '',
	});
	/*提交表单数据*/
	const submit = () => {
		if (!roundshow.value) {
			uni.showToast({
				title: '请选择是否同意',
				icon:'error'
			})
			return
		} else {
			let params = {
				...form.value,
				status: 1,
				mid: uni.getStorageSync('mid')
			}
			modifyMember(params).then(res => {
				if (res.code == 200) {
					setTimeout(() => {
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon: 'success'
						})
						setTimeout(() => {
							uni.hideToast();
							uni.navigateTo({
								url: '/subpages/applyfor/submityes'
							})
						}, 1000)
					}, 0)
				}
			})
		}
	}
	const roundshow = ref(true)
	const roundchange = () => {
		roundshow.value = !roundshow.value
	}
	const formRef = ref(null);
</script>

<style scoped lang="scss">
	.content {
		background: #F4F5F8;
		width: 750rpx;
		height: 100vh;
		padding-top: 284rpx;

		.shareprofit_placeholder_num {}

		.tophaderbg {
			position: absolute;
			top: 0;
			z-index: 2;
		}

		.ScrollView {
			position: relative;
			z-index: 3;
			box-sizing: border-box;
			padding: 0 40rpx;
			height: calc(100vh - 435rpx);

			.topdaohang {
				width: 100%;
				height: 150rpx;
				margin-bottom: -24rpx;
			}

			.formitem {
				background: #FFFFFF;
				padding: 47rpx 36rpx;
				border-radius: 20rpx;

				.form-item {
					.title {
						margin-top: 50rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						margin-bottom: 30rpx;
						color: #252525;

					}

					::v-deep .u-textarea {
						background-color: #F4F5F8 !important;

						.u-textarea__count {
							background-color: #F4F5F8 !important;
						}
					}
				}

			}

			.opinionBox {
				margin-top: 50rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 40rpx 35rpx;

				.opinionBox-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.top-leftbox {
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #252525;

					}

					.top-rightbox {
						display: flex;
						align-items: center;

						.radioround {
							width: 34rpx;
							height: 34rpx;
							border-radius: 50%;
							border: 2rpx solid #2854B7;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 18rpx;

							.itemround {
								width: 20rpx;
								height: 20rpx;
								background: #2854B7;
								border-radius: 50%;
							}
						}
					}
				}

				.opinionBox-content {
					margin-top: 34rpx;
					padding: 30rpx;
					background-color: #F4F5F8;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 26rpx;
					color: #252525;
				}
			}
		}

		.bottom-btn {
			position: fixed;
			bottom: 40rpx;
			left: 40rpx;
			z-index: 10;
			width: 670rpx;
			height: 110rpx;
			border-radius: 20rpx;

			.btnbox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					width: 325rpx;
					height: 110rpx;
				}
			}
		}
	}
</style>